<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="../css/common.css" rel="stylesheet" type="text/css"/>
<style>
.pic_list li,.flow li{-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;background:#eee;width:100px;height:100px;margin:10px;float:left;}
.pic_list li.down{opacity:0.5;}
.flow{position:absolute;}
</style>
</head>
<body>
<ul class="pic_list">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script>
$.fn.YY_drag=function(options){
	var obj=null;
	var select_num=null;
	var all=this;
	var defaults={
		initialize:function(all){},
		selectup:function(o){
			if (o!==null&&typeof o!='undefined'){
				console.log('up:'+o.html());
				o.fadeTo(300,1);
				obj.remove();
			}
		},
		selectover:function(o){
			console.log('over:'+o.html());
        	all.fadeTo(0,1);
			o.fadeTo(0,0.5);
		},
		selectdown:function(o){console.log('down:'+o.html());},
		recover:function(){all.fadeTo(0,1);}
	};
	var options=$.extend(defaults,options);
	if ($('.flow').length==0)$('body').append('<div class="flow"></div>');
	if (typeof options.initialize=='function'){
		options.initialize(all);
	}
	all.mousedown(function(e){
		obj=$(this);
		if (typeof options.selectover=='function'){
    		options.selectdown(obj);
    	}
		select_num=null;
		all.removeClass('down');
		$('.flow').html('').show();
		obj.addClass('down').clone().appendTo('.flow');
		var d=$('.flow');
        var event = window.event || e;
        tHeight = event.clientY-obj.offset().top;
      	lWidth = event.clientX-obj.offset().left;
        d.css({'left':obj.offset().left,'top':obj.offset().top});

        var over_fun = function (e) {
            var d_s=get_obj_status(obj,true);
            var event = window.event || e;
            if (d.css('left') == '')d.css('left',0);
            if (d.css('top') == '')d.css('top',0);

            var top = event.clientY - tHeight;
            var left = event.clientX - lWidth;

            top = top > d_s.w_h+d_s.st - d_s.d_h ? d_s.w_h+d_s.st - d_s.d_h : top;
            top = top <d_s.st ? d_s.st : top;
            left = left > d_s.w_w+d_s.sl - d_s.d_w? d_s.w_w+d_s.sl - d_s.d_w: left;
            left = left < d_s.sl ? d_s.sl : left;
            d.css({'left':left,'top':top});
            
           	var all_out=true;
           	all.each(function(k){
            	var c_obj=$(this);
            	var c_s=get_obj_status(c_obj);
            	if (event.clientY>=c_obj.offset().top&&event.clientY<=(c_obj.offset().top+c_s.h-c_s.mt-c_s.mb)&&event.clientX>=c_obj.offset().left&&event.clientX<=(c_obj.offset().left+c_s.w-c_s.mr-c_s.ml)){
	            	if ($('.pic_list li').index(obj)==k){
	            		return false;
	            	}
	            	if (typeof options.selectover=='function'&&select_num!==k){
	            		options.selectover(c_obj);
	            	}
	            	select_num=k;
            		all_out=false;
            	}
            });
           	if (all_out&&typeof options.recover=='function'){
           		options.recover();
           		select_num=null;
           	}
      };
      $(document).bind('mousemove',over_fun);
      $(document).bind('mouseup',function (e) {
    	  $(document).unbind('mousemove',over_fun);
        	obj.removeClass('down');
        	d.hide();
        	if (typeof options.selectup=='function'){
        		options.selectup(select_num===null?null:$('.pic_list li').eq(select_num));
        	}
        	$(this).unbind(e);
        });
	});
};
$('.pic_list li').YY_drag();
</script>
</body>
</html>